<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ElasticSearch之curd</title>
  <style>
    /*找到html标签、body标签，和挂载的标签 都给他们统一设置样式*/
    html, body, #app, .el-container {
      /*设置内部填充为0，几个布局元素之间没有间距*/
      padding: 0px;
      /*外部间距也是如此设置*/
      margin: 0px;
      /*统一设置高度为100%*/
      height: 100%;
    }

    /*添加按钮靠右显示*/
    .rightAlign {
      text-align: right;
    }
    table {
      border-right: 1px solid #000000;
      border-bottom: 1px solid #000000;
      text-align: center;
      width: 100%;
    }

    table th {
      border-left: 1px solid #000000;
      border-top: 1px solid #000000;
    }

    table td {
      border-left: 1px solid #000000;
      border-top: 1px solid #000000;
    }

  </style>
  <script src="/js/vue.js"></script>
  <script src="/js/vue-router.js"></script>
  <link rel="stylesheet" href="/css/el/index.css">
  <script src="/js/el/index.js"></script>
  <script type="text/javascript" src="/js/axios/index.js"></script>
  <script type="text/javascript" src="/api/ajax.js"></script>
  <script src="/js/marked/marked.js"></script>

</head>
<body>
<div id="app">
  <div>
    <el-form v-model="accountQueryForm" inline size="mini" style="text-align: left">
      <el-form-item label="账号">
      <el-input v-model="accountQueryForm.accountNumber"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="accountQueryForm.age"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="accountQueryForm.address"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-input v-model="accountQueryForm.gender"></el-input>
      </el-form-item>
      <el-form-item label="firstname">
        <el-input v-model="accountQueryForm.firstname"></el-input>
      </el-form-item>
      <el-form-item label="lastname">
        <el-input v-model="accountQueryForm.lastname"></el-input>
      </el-form-item>
      <el-form-item label="职位">
        <el-input v-model="accountQueryForm.employer"></el-input>
      </el-form-item>
      <el-form-item label="余额">
        <el-input v-model="accountQueryForm.balance"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="accountQueryForm.email"></el-input>
      </el-form-item>
      <el-form-item label="所在城市">
        <el-input v-model="accountQueryForm.city"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-input v-model="accountQueryForm.state"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getAccountListByPage" type="primary" >查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="accountQueryForm={}" type="primary" >重置</el-button>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button v-if="hasAuth('account:add')" @click="showAddAccountDialogHandler" type="primary" >新增</el-button>
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="showAccountDialog" v-if="showAccountDialog" fullscreen :modal="false">
      <el-form :model="account" label-width="130px" size="mini">
        <el-form-item label="账号">
          <el-input v-model="account.accountNumber"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="account.age"></el-input>
        </el-form-item>
        <el-form-item label="余额">
          <el-input v-model="account.balance"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="account.gender"></el-input>
        </el-form-item>
        <el-form-item label="firstname">
          <el-input v-model="account.firstname"></el-input>
        </el-form-item>
        <el-form-item label="lastname">
          <el-input v-model="account.lastname"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="account.email"></el-input>
        </el-form-item>
        <el-form-item label="职位">
          <el-input v-model="account.employer"></el-input>
        </el-form-item>
        <el-form-item label="所在城市">
          <el-input v-model="account.city"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="account.address"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-input v-model="account.state"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showAccountDialog = false">取消</el-button>
        <el-button @click="accountDialogConfirm()">确定</el-button>
      </div>
    </el-dialog>
    <el-table :data="accountList">
      <el-table-column prop="accountNumber" label="账号" width="60px"></el-table-column>
      <el-table-column prop="age" label="年龄" width="60px"></el-table-column>
      <el-table-column prop="balance" label="余额" width="100px"></el-table-column>
      <el-table-column prop="gender" label="性别" width="60px"></el-table-column>
      <el-table-column prop="firstname" label="firstname" width="100px"></el-table-column>
      <el-table-column prop="lastname" label="lastname" width="100px"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="employer" label="职位" width="100px"></el-table-column>
      <el-table-column prop="city" label="所在城市" width="110px"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column prop="state" label="状态" width="60px"></el-table-column>
      <el-table-column label="操作" width="150" v-if="hasAuth('account:update')||hasAuth('account:delete')">
        <template slot-scope="scope">
          <el-button class="el-icon-edit-outline" @click="showUpdateAccountDialogHandler(scope.$index, scope.row)" v-if="hasAuth('account:update')" type="primary" size="mini"></el-button>
          <el-button class="el-icon-delete-solid" @click="deleteAccount(scope.$index, scope.row)" v-if="hasAuth('account:delete')" type="danger" size="mini"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
        layout="total, sizes, prev, pager, next, jumper" :current-page="currentPage"
        :page-sizes="[10,15,30,50]" :page-size="pageSize" :total="total">
    </el-pagination>
  </div>
</div>

</body>
</html>
<script>
  new Vue({
    el: '#app',
    data: function () {
      return {
        showAccountDialog: false,
        accountQueryForm: {},
        operationType: "",
        accountList: [],
        // 新增(新增前需要清空emp),编辑(需要将当前行赋值给emp),查询(与查询条件双向绑定)共用
        account: {},
        total: 0,
        currentPage: 1,
        pageSize: 10,
        sortInfo: null
      }
    },
    methods: {
      hasAuth(){
        return true;
      },
      showUpdateAccountDialogHandler(index, row) {
        this.operationType = "update";
        this.account = row;
        this.showAccountDialog = true;
      },
      showAddAccountDialogHandler() {
        this.operationType = "add";
        this.account = {};
        this.showAccountDialog = true;
      },
      accountDialogConfirm() {
        if (this.operationType === "add") {
          this.addAccount()
        }
        if (this.operationType === "update") {
          this.updateAccount()
        }
        this.showAccountDialog = false;
      },
      async deleteAccount(index, row) {
        this.$confirm('确定要删除?', '提示', {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'}).then(() => {
          let url = `/account/account/` + row.accountNumber;
          ajax(url,null,'delete').then((res) => {
            if (res.success) {
              this.getAccountListByPage();
            }
          })
        }).catch(() => {
          this.$message({type: 'info', message: '已取消删除'});
        });
      },
      addAccount() {
        let url = `/account/account/`;
        ajax(url, this.account, "POST").then(res => {
          if (res.success) {
            this.getAccountListByPage();
          }
        })
      },
      async updateAccount() {
        let url = `/account/account`;
        let res = ajax(url, this.account, "put");
        if (res.success) {
          this.getAccountListByPage();
        }
      },
      // pageSize变动,触发重新从后台加载数据
      sizeChangeHandle(pageSize) {
        this.pageSize = pageSize;
        this.getAccountListByPage();
      },
      // currentPage变动,触发从后台加载数据
      currentChangeHandle(currentPage) {
        this.currentPage = currentPage;
        this.getAccountListByPage();
      },
      async getAccountListByPage() {
        let url = `/account/getAccountListByPage`;
        // 组装分页与排序
        this.accountQueryForm.currentPage = this.currentPage;
        this.accountQueryForm.pageSize = this.pageSize;
        this.accountQueryForm.sortInfo = this.sortInfo;
        let res = await ajax(url, this.accountQueryForm, 'POST');
        if (res.success) {
          this.accountList = res.data.list;
          this.total = res.data.total;
        }
      },
    },
    mounted() {
      this.getAccountListByPage()
    }
  })
</script>
